<template>
	<view class="workFlow-v">
		<view class="top_sticky"> 考勤列表 </view>
		<u-time-line class="u-time">
			<u-time-line-item nodeTop="1" v-for="(groups, index) in tasks" :key="index">
				<template v-slot:node>
					<view class="u-node">
						<u-image :src="emptyImg" mode="widthFix"></u-image>
					</view>
				</template>
				<template v-slot:content>
					<view class="u-order-title">{{ groups.date }}</view>
					<view v-for="(item, i) in groups.items" :key="i">
						<view style="
                background-color: #f4f6f8;
                border-radius: 7rpx;
                padding: 20rpx;
                margin-top: 18rpx;
                position: relative;
                min-height: 60rpx;
              " @click="toggleDetails(item)">
							<u-tag :text="item.jobinfo.isattendance == '是' ? '已打卡' : '未打卡'"
								:type="item.jobinfo.isattendance == '是' ? 'success' : 'error'" size="mini" style="
                  position: absolute;
                  top: 0rpx;
                  right: 0rpx;
                  border: none;
                  font-size: 23rpx;
                " />
							<view class="u-order-desc">{{ item.jobinfo.name }}</view>
							<view class="u-order-time">{{
                item.jobinfo.attendanceTime == ""
                  ? item.jobinfo.start + "-" + item.jobinfo.end
                  : item.jobinfo.attendanceTime
              }}</view>
							<view class="u-order-wz"><u-icon :name="mpImg" size="23"
									style="margin-right: 10rpx"></u-icon>{{ item.jobinfo.notes }}</view>
						</view>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line>
	</view>
</template>

<script>
	import {
		getList
	} from "@/api/xjxt.js";
	export default {
		data() {
			return {
				emptyImg: require("@/static/image/tabbar/timeLine.png"),
				mpImg: require("@/static/image/zuobiao.png"),
				tasks: [

				],
			};
		},
		onShow() {
			this.init();
		},
		methods: {
			init() {
				getList({
					id: "349057407209541",
					type: "考勤",
				}).then((res) => {
					this.initListData(res.data);
				});
			},
			initListData(data) {
				// 创建一个Map用于根据executionDate去重
				const dateMap = new Map();

				data.forEach((e) => {
					// 将时间戳转换为日期字符串
					var time = this.wpwork.toDate(e.executionDate, "yyyy-MM-dd");

					// 根据日期进行分组
					if (!dateMap.has(time)) {
						dateMap.set(time, []);
					}

					// 添加当前任务到对应日期的数组中
					e.jobinfo = JSON.parse(e.jobinfo);
					dateMap.get(time).push(e);
				});

				// 构建tasks数组
				const tasks = [];
				dateMap.forEach((items, date) => {
					tasks.push({
						date: date,
						items: items,
					});
				});

				// 赋值给this.tasks
				this.tasks = tasks;
			},
			toggleDetails(item) {
				const query = `?data=${encodeURIComponent(JSON.stringify(item))}`;
				uni.navigateTo({
					url: "/pages/adkq/detail" + query,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.top_sticky {
		z-index: 999;
		position: sticky;
		top: 0;
		/* 关键：明确设为 0，而不是依赖变量 */
		background: linear-gradient(to right, #014feb, #2775fe);
		height: 130rpx;
		line-height: 170rpx;
		color: #fff;
		text-align: center;
		font-weight: 400;
		font-size: 36rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		/* 可选：加点阴影提升层次感 */
	}

	.u-time {
		width: 93%;
		margin: auto;
		padding-top: 25rpx;
	}

	.u-node {
		width: 22rpx;
		height: 22rpx;
		border-radius: 100rpx;
		margin-top: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.u-order-title {
		color: #3a3a4a;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: #494f58;
		font-size: 36rpx;
		margin-bottom: 16rpx;
	}

	.u-order-time {
		color: #979797;
		font-size: 26rpx;
		margin-bottom: 16rpx;
	}

	.u-order-wz {
		color: #494f58;
		font-size: 26rpx;
	}
</style>